<template>
    <div>setup语法糖:setup另外一种写法</div>
    <div @click="handler">{{ count }}</div>
    <div @click="addAge">{{xiaoming}}</div>
    <div @click="xiaomei.age++">{{xiaomei}}</div>
</template>

<script lang="ts" setup>
import { ref,reactive} from 'vue';
//注意
//script标签身上,添加一个属性setup,代表即为组合式API函数入口地方
//这里就不要再写选择式API写法(vue2写法不能书写了)
//你可以认为:两个script标签之间即为setup函数体
//申明的变量|常量可以在模版中直接使用

//组合式API函数,你想保证数据是响应式,Ref|代理对象
//ref组合式API函数,一般用于定义基本类型数据(响应式的)
//模版在使用Ref对象自动解包
const count = ref(1);
//ref也可以定义引用类型数据
const xiaoming = ref({ name: '小明', age: 18, hobby: ['吃饭', '睡觉', '打豆豆'] });
const xiaomei = reactive({name:'小美',age:27});
console.log(xiaomei);
const handler = () => {
    count.value++;
}
const addAge = ()=>{
    //ref函数也可以将引用类型数据变为响应式数据
    //{value:proxy}
     xiaoming.value.age++;
     console.log(xiaoming);
}

</script>



<style></style>